<!DOCTYPE html>
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <script src="https://unpkg.com/vue@3.4.27/dist/vue.global.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/@picocss/pico@2.0.6/css/pico.css">
    <script src="https://unpkg.com/axios@1.7.2/dist/axios.min.js"></script>
    <title>学生管理</title>
</head>

<body>
<div id="app">
    <main class="container">
        <nav>
            <ul>
                <li><strong>学生列表</strong></li>
            </ul>
            <ul>
                <li><a href="/student/student-add.html">添加</a></li>
                <li><a href="index.html">退出</a></li>
            </ul>
        </nav>

        <table>
            <thead>
            <tr>
                <th scope="col">学生姓名</th>
                <th scope="col">学号</th>
                <th scope="col">班级</th>
                <th scope="col">备注</th>
                <th scope="col">修改</th>
                <th scope="col">删除</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item, index) in items">
                <td>{{ item.student.name }}</td>
                <td>{{ item.student.code }}</td>
                <td>{{ item.classgroup.name }}</td> <!-- 显示学生所属班级 -->
                <td>{{ item.student.remark }}</td>
                <td><a :href="getEditUrl(item)">修改</a></td>
                <td><a :href="getDeleteUrl(item)">删除</a></td>
            </tr>
            </tbody>
        </table>
    </main>
</div>

<script>
    const App = {
        data() {
            return {
                items: [],  // 存储学生列表
            };
        },

        methods: {
            init() {
                let url = "/students";  // 获取学生列表的接口

                let vueInstance = this;

                // 使用Axios发起GET请求
                axios.get(url).then(function(response) {
                    console.log("响应的状态码：", response.status);
                    console.log("响应的数据：", JSON.stringify(response.data));

                    if(response.status == 200 && response.data != null && response.data.code === 200) {
                        // 请求成功后，将数据绑定到items
                        vueInstance.items = response.data.data.rows;
                    }
                })
                    .catch(function (error) {
                        console.log("访问出错了：", error);
                        console.log("地址：", url);
                    });
            },

            // 获取删除操作的链接
            getDeleteUrl(item) {
                let url = "/student/student-delete.html?id=" + item.student.id;
                return url;
            },

            // 获取编辑操作的链接
            getEditUrl(item) {
                let url = "/student/student-edit.html?id=" + item.student.id;
                return url;
            },
        },

        mounted() {
            // 页面加载时，初始化数据
            this.init();  // 重新加载学生列表数据
        }
    };

    const app = Vue.createApp(App);
    app.mount("#app");

</script>
</body>
</html>
